<template>
  <div class="base-dom">
    <div class="data-json mb-10">
      <p class="title">1.Vue实现图片与文字混输</p>
      <!--
          1.H5的全局属性contenteditable,div它是不支持placeholder属性的。那怎么在div内容为空的时候显示一个默认文字呢？ 
          2.spellcheck属性，html5中的所有元素都可以指定，对于不是输入栏的元素，须指定contenteditable="true" 编辑属性，才能使用。(如div什么的。)
          3.关闭拼写检查
      -->
      <!--EditDiv --->
      <edit-div></edit-div>
    </div>
    <div class="data-json mb-10">
      <p class="title">2.Vue -- filters 过滤器、倒计时效果</p>
      <div id="wrapper" class="wrapper">
        距离活动结束还剩:
        <span v-html="times"></span>
      </div>
    </div>
    <div class="data-json mb-10 svg-warp">
      <p class="title">3.Vue电商项目-提升逼格玩转svg</p>
      <ul class="svg-ul mt-10">
        <li v-for="(name, index) in svgName" :key="index">
          <svg-icon :iconClass="name" class="ul-icon"></svg-icon>
        </li>
      </ul>
    </div>
    <div class="data-json mb-10 svg-warp">
      <p class="title">4.如何动态绑定多个事件</p>
      <!--通过v-on={...}绑定多个事件时，如果是在 DOM 元素上绑定，则只支持原生事件，不支持自定义事件；
          如果是在 Vue 组件上绑定，则只支持自定义事件，不支持原生事件
          vm.$on不支持原生 DOM 事件
      -->
      <div id="container" v-on="eventMaps">动态绑定多个事件</div>
    </div>
  </div>
</template>

<script>
import EditDiv from "./EditDiv";
import { timeMixin } from "@mixins/times";
export default {
  name: "BaseDom",
  components: {
    EditDiv
  },
  mixins: [timeMixin],
  data() {
    return {
      svgName: ["user", "password", "email", "eye", "collect"]
    };
  },
  computed: {
    eventMaps() {
      return {
        click: this.clickHandler,
        mouseover: this.mouseoverHandler,
        "my-event1": this.eventHandler
      };
    }
  },
  mounted() {
    this.countDown = Number(1576051937) + 60; // 这里如果是时间到分钟，需要增加一个60s，这样防止，到00还需要等一分钟才结束活动，如果显示到秒就不需要了次变量了。
    this.timeDown();
    this.triggerEvents();
  },
  methods: {
    clickHandler(eventName) {
      console.log("原生 click 事件被触发!");
    },
    eventHandler(eventName) {
      console.log(eventName + " 事件被触发!");
    },
    mouseoverHandler(eventName) {
      console.log("原生 mouseover 事件被触发!");
    },
    triggerEvents() {
      setTimeout(() => {
        console.log("主动触发my-event1事件");
        this.$emit("my-event1", "my-event1");
      }, 5000);
    }
  }
};
</script>

<style lang="stylus" scoped>
.base-dom {
  .svg-warp {
    position: relative
    ul, li {
      list-style: none
      margin-right: 10px
      display: inline-block
    }
    .ul-icon {
      background-color: #2b85e4
      color: #fff
      width: 22px
      height: 22px
    }
  }
}
</style>
